<template>
	<view class="container" :class="from">
		<view v-if="from != 'web'" class="ch-nav"></view>
		<uni-nav-bar v-else class="ch-nav" height="88rpx" :backgroundColor="navBgColor" leftWidth="180rpx" rightWidth="180rpx" color="#333" :fixed="true" :padding="false" :border="false" @clickLeft="$goBack(1)">
			<template slot="left">
				<image class="left" :src="!isBlack ? require('@/public/images/public/dhl_fhb.png') : require('@/public/images/public/dhl_fhjt.png')" mode="aspectFit"></image>
			</template>
			<text class="title">{{ isBlack ? '专家福利派送' : '' }}</text>
			<template slot="right"></template>
		</uni-nav-bar>
		<view class="body">
			<LuckyReward :token="token" :from="from" :expertId="expertId" :width="width" :height="height"></LuckyReward>
		</view>
		<view class="foot flex-c">
			<view class="rules-title flex-r">
				<image src="@/public/images/other/zs.png" mode="aspectFit"></image>
				<text>活动规则</text>
				<image src="@/public/images/other/zs.png" mode="aspectFit"></image>
			</view>
			<view class="rules-content">
				<text>1、购买同一个专家10篇料赠送一次抽奖机会。
				2、抽奖100%中奖。
				3、奖品为优惠券，优惠券可适用于全平台专家，用户获取的优惠券将自动发送到账户。
				4、本次活动的最终解释权归平台所有。</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				width: '634rpx',
				height: '634rpx',
				
				isBlack: false,
				navBgColor: 'rgba(255,255,255,0)',
				
				luckyList: [],
				
				from: 'web',
				expertId: ''
			};
		},
		components: {
			LuckyReward: () => import('./components/ch-lucky/ch-luckyreward.vue')
		},
		computed: {
			token() {
				return this.$store.state.userToken
			}
		},
		onLoad(e) {
			console.log(e);
			console.log(this.$Route.query);
			this.expertId = this.$Route.query.eid
			this.from = e.from || 'web'
			let token = e.token || null
			if(token){
				this.$store.commit('SET_USERTOKEN', token);
			}else if(this.from != 'web' && !this.token){
				uni.showToast({
					title: '请登录后访问',
					icon: 'error'
				})
			}
			let windowInfo = uni.getWindowInfo()
			console.log(windowInfo);
			if(windowInfo.windowWidth >= 525){
				let widthPx = 634 * (525/750) + 'px'
				console.log(widthPx);
				this.width = widthPx
				this.height = widthPx
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
			if(this.timer){
				return false
			}
			this.timer = setTimeout(()=>{
				this.setNavBgColor()
				this.timer = null
			}, 50);
		},
		methods: {
			//设置导航区域背景色
			setNavBgColor() {
				let scrollTop = this.scrollTop
				switch (true){
					case scrollTop < 10:
						this.navBgColor = 'rgba(255,255,255,0)'
						this.isBlack = false
						this.navBorder = false
						break;
					case scrollTop < 20:
						this.navBgColor = 'rgba(255,255,255,0.1)'
						this.isBlack = false
						break;
					case scrollTop < 40:
						this.navBgColor = 'rgba(255,255,255,0.2)'
						this.isBlack = false
						break;
					case scrollTop < 80:
						this.navBgColor = 'rgba(255,255,255,0.4)'
						this.isBlack = true
						break;
					case scrollTop < 120:
						this.navBgColor = 'rgba(255,255,255,0.6)'
						this.isBlack = true
						break;
					case scrollTop < 150:
						this.navBgColor = 'rgba(255,255,255,0.7)'
						this.isBlack = true
						break;
					case scrollTop < 200:
						this.navBgColor = 'rgba(255,255,255,0.8)'
						this.isBlack = true
						break;
					case scrollTop > 300:
						this.navBgColor = 'rgba(255,255,255,1)'
						this.isBlack = true
						break;
				}
			}
		}
	}
</script>

<style lang="scss">
	.container{
		background-color: #FD0000;
		background-image: url("~@/public/images/other/bj-cj.jpg");
		background-position: 0 0;
		background-repeat: no-repeat;
		background-size: 100%;
		padding-bottom: calc(30rpx + var(--safe-area-inset-bottom));
		&.web{
			background-position: 0 -88rpx;
			.body{
				margin: 337rpx auto 0;
			}
		}
	}
	.ch-nav{
		height: 88rpx;
	}
	.body{
		margin: 425rpx auto 0;
		height: 843rpx;
	}
	.foot{
		margin: 40rpx 20rpx 0;
		background: #D90000;
		border-radius: 20rpx;
		color: #FFF1A5;
		.rules-title{
			margin-top: 40rpx;
			align-items: center;
			justify-content: center;
			image{
				width: 10rpx;
				height: 10rpx;
			}
			text{
				margin: 0 30rpx;
				font-size: 32rpx;
				font-weight: bold;
				line-height: 1;
			}
		}
		.rules-content{
			margin: 30rpx 20rpx 40rpx;
			font-size: 26rpx;
			line-height: 44rpx;
		}
	}
</style>